import * as React from "react";
import * as ReactDOM from "react-dom";

import "./UserCenter.less";
import {UserModel} from "../../model/UserModel";
import {userInfo} from "../../url";
import Back from "../Components/Back/Back";
import Tabbar from "../Components/Tabbar/Tabbar";

declare const wx: any;
declare const weui: any;

export interface UserCenterProps {

}

export interface State {
    userInfo: UserModel
    isTran: boolean
}

export default class UserCenter extends React.Component<UserCenterProps, State> {
    //默认属性
    static readonly defaultProps: UserCenterProps = {};

    constructor(props: UserCenterProps) {
        super(props);
        //默认状态
        this.state = {
            userInfo: JSON.parse(localStorage.getItem('userInfo') || '{}'),
            isTran: false
        };
    }

    //组件挂载后回调
    componentDidMount() {
        console.log(this.state.userInfo);
        if (!this.state.userInfo.id) {
            location.hash = '/login';
        }
        userInfo();
        document.title = '会员中心';
    }


    onOut = () => {
        console.log(1);
        wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                console.log(result);
            }
        });
    };


    render() {
        const row = [
            {
                title: '控价管理',
                item: [
                    {
                        img: '/static/web/imgs/accredit.png',
                        name: '我的特权',
                        link: '#/agent-list'
                    },
                    {
                        img: '/static/web/imgs/join.png',
                        name: '邀请代理',
                        link: '#/share-agent-list'
                    },
                    {
                        img: '/static/web/imgs/check.png',
                        name: '审核管理',
                        link: '#/agent-review'
                    },
                    {
                        img: '/static/web/imgs/scan.png',
                        name: '扫码发货',
                        link: '#/shipments'
                    },
                    {
                        img: '/static/web/imgs/seek.png',
                        name: '扫码记录',
                        link: '#/shipments-logs'
                    },
                    {
                        img: '/static/web/imgs/subordinate.png',
                        name: '下级代理',
                        link: '#/customer-get-agent-level'
                    },
                    {
                        img: '/static/web/imgs/subordinate.png',
                        name: '奖金管理',
                        link: 'javascript:'
                    }
                ]
            },
            {
                title: '财务管理/订单管理',
                item: [
                    {
                        img: '/static/web/imgs/shopping.png',
                        name: '我要订货',
                        link: '#/order-goods-list'
                    },
                    {
                        img: '/static/web/imgs/order.png',
                        name: '订单管理',
                        link: 'javascript:'
                    }
                ]
            },
            {
                title: '返利管理',
                item: []
            },
            {
                title: '营销工具',
                item: []
            }
        ];
        return <div className="UserCenter">
            {/*<Back/>*/}
            {this.state.isTran ? <>
                <div className="scroll-wrapper">
                    <div className="scroll">
                        <div className="scroll-item">
                            <div className="" style={{
                                display: 'flex',
                                alignItems: 'center'
                            }}>
                                <img src="/static/web/imgs/seek.png" alt="Icon"/>
                                <span>扫码记录</span>
                            </div>
                            <i className="iconfont icon-zhanghao"/>
                        </div>
                        <div className="scroll-item">
                            <div className="" style={{
                                display: 'flex',
                                alignItems: 'center'
                            }}>
                                <img src="/static/web/imgs/site.png" alt="Icon"/>
                                <span>地址管理</span>
                            </div>
                            <i className="iconfont icon-zhanghao"/>
                        </div>
                        <div className="scroll-item">
                            <div className="" style={{
                                display: 'flex',
                                alignItems: 'center'
                            }} onClick={() => {
                                location.hash = ''
                            }
                            }>
                                <img src="/static/web/imgs/password.png" alt="Icon"/>
                                <span>修改密码</span>
                            </div>
                            <i className="iconfont icon-zhanghao"/>
                        </div>
                    </div>
                    <button className="btn btn-out" onClick={this.onOut}>退出登录</button>
                </div>
                <div className="bg" onClick={() => {
                    this.setState({isTran: !this.state.isTran})
                }}>&ensp;</div>
            </> : null}
            <div className={`main ${this.state.isTran ? 'tran' : ''}`}>
                <div className="top">
                    <button className="btn btn-menu" onClick={() => {
                        this.setState({isTran: !this.state.isTran})
                    }}>
                        <i className="iconfont icon">=</i>
                    </button>
                    <div className="userinfo">
                        <div className="headimg">
                            <div className="spinner">&ensp;</div>
                            <img src={this.state.userInfo.avatar_wechat}/>
                        </div>
                        <div className="username">{this.state.userInfo.nickname_wechat || '获取中'}</div>
                        <div className="userid">id：{this.state.userInfo.id || '获取中'}</div>
                    </div>
                    <div className="money">
                        余额{this.state.userInfo.credit2}
                    </div>
                </div>
                {row.map((item) => {
                    return <>
                        <div className="sub-title">
                            {item.title}
                        </div>
                        <div className="weui-grids">
                            {item.item.map((it) => {
                                return <a href={it.link} className="weui-grid">
                                    <div className="weui-grid__icon">
                                        <img src={it.img}/>
                                    </div>
                                    <p className="weui-grid__label">{it.name}</p>
                                </a>
                            })}
                        </div>
                    </>
                })}
                <Tabbar show={'index'}/>
            </div>
        </div>
    }
}
